<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>

        .box1{
            width: 400px;
            height: 600px;
            -moz-box-shadow:0px 0px 10px #FF0000; 
            -webkit-box-shadow:0px 0px 10px #FF0000; 
            box-shadow:0px 0px 10px #FF0000;
            border-radius: 20px;
            position: relative;
            margin: 0 auto;
            margin-top: 50px;
        }
        .head{
            width: 380px;
            height: 50px;
            right: 10px;
            top: 10px;
            position: absolute;
        }
        #inp{
            width: 372px;
            height: 44px;
            border-radius: 15px;
            background-color: rgb(160, 234, 236);
            font-size: 2rem;
        }
        .foot{
            position: absolute;
            width: 380px;
            height: 500px;
            top: 70px;
            left: 10px;
            display: flex;
            flex-wrap: wrap;
        }
        button{
            width: 70px;
            height: 70px;
            margin: 12px;
        }
        button{
            font-size: 2rem;
            border-radius: 10px;
            background-color: rgb(204, 233, 234);
        }
    </style>
<body>
    <div class="box1">
        <div class="head">
            <input type="text" id="inp" disabled>
        </div>
        <div class="foot">
            <button onclick="add(1)">1</button>
            <button onclick="add(2)">2</button>
            <button onclick="add(3)">3</button>
            <button onclick="add('+')">+</button>
            <button onclick="add(4)">4</button>
            <button onclick="add(5)">5</button>
            <button onclick="add(6)">6</button>
            <button onclick="add('-')">-</button>
            <button onclick="add(7)">7</button>
            <button onclick="add(8)">8</button>
            <button onclick="add(9)">9</button>
            <button onclick="add('*')">X</button>
            <button onclick="dl()">C</button>
            <button onclick="tg()">←</button>
            <button onclick="add(0)">0</button>
            <button onclick="add('/')">÷</button>
            <button style="width: 380px;" onclick="js()">=</button>
        </div>
    </div>

    <script>
        let inp = document.getElementById("inp")
        function add(s){
            inp.value+=s
        }
        function js(){
            if(inp.value==''){
                alert('你还没有输入式子哟~')
            }else{
                inp.value=eval(inp.value)
                console.log(inp.value);
            }
        }
        function dl(){
            inp.value=''
        }
        function tg(){
            let str = inp.value.substr(0,inp.value.length-1)
            inp.value = str
        }
        
    </script>
</body>
</html>